<template>
  <div class="margin-top-20">
    <el-form ref="form" :model="form" label-width="160px">
      <el-form-item label="短信APPID">
        <el-input v-model="form['smsId']"/>
      </el-form-item>
      <el-form-item label="短信密匙">
        <el-input v-model="form['smsSecret']"/>
      </el-form-item>
      <el-form-item label="短信签名">
        <el-input v-model="form['smsSign']"/>
      </el-form-item>
      <el-form-item label="订单支付成功">
        <el-switch v-model="form['payTplStatus']"/>
        <el-input v-model="form['payTpl']" :disabled="!form['payTplStatus']"/>
        <el-alert :title="form['payTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="订单分配成功">
        <el-switch v-model="form['allocateTplStatus']"/>
        <el-input v-model="form['allocateTpl']" :disabled="!form['allocateTplStatus']"/>
        <el-alert :title="form['allocateTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="订单退款成功">
        <el-switch v-model="form['refundTplStatus']"/>
        <el-input v-model="form['refundTpl']" :disabled="!form['refundTplStatus']"/>
        <el-alert :title="form['refundTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="订单已取消">
        <el-switch v-model="form['cancelTplStatus']"/>
        <el-input v-model="form['cancelTpl']" :disabled="!form['cancelTplStatus']"/>
        <el-alert :title="form['cancelTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="司机接收订单">
        <el-switch v-model="form['acceptTplStatus']"/>
        <el-input v-model="form['acceptTpl']" :disabled="!form['acceptTplStatus']"/>
        <el-alert :title="form['acceptTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="新订单提醒">
        <el-switch v-model="form['remindTplStatus']"/>
        <el-input v-model="form['remindTpl']" :disabled="!form['remindTplStatus']"/>
        <el-alert :title="form['remindTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="司机接单提醒用户及管理员">
        <el-switch v-model="form['remindAcceptTplStatus']"/>
        <el-input v-model="form['remindAcceptTpl']" :disabled="!form['remindAcceptTplStatus']"/>
        <el-alert :title="form['remindAcceptTplContent']" :closable="false" type="info"/>
      </el-form-item>
      <el-form-item label="订单完成提醒用户及管理员">
        <el-switch v-model="form['finishTplStatus']"/>
        <el-input v-model="form['finishTpl']" :disabled="!form['finishTplStatus']"/>
        <el-alert :title="form['finishTplContent']" :closable="false" type="info"/>
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <el-button type="primary" size="small" @click="onSubmit">保 存</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CustomerServiceTelephone',
    data() {
      return {
        form: {
          // 短信Id
          smsId: '',
          // 短信密钥
          smsSecret: '',
          // 签名
          smsSign: '',
          // 支付成功短信通知状态
          payTplStatus: false,
          // 支付成功通知模板id
          payTpl: '',
          // 订单分配短信通知状态
          allocateTplStatus: false,
          // 分配模板id
          allocateTpl: '',
          // 退款短信通知状态
          refundTplStatus: false,
          // 退款模板id
          refundTpl: '',
          // 取消订单短信通知状态
          cancelTplStatus: false,
          // 取消模板id
          cancelTpl: '',
          // 司机接单短信通知状态
          acceptTplStatus: false,
          // 司机接单模板id
          acceptTpl: '',
          // 新订单提醒状态
          remindTplStatus: false,
          // 新订单提醒id
          remindTpl: '',
          // 司机接单提醒用户及管理员模板id
          remindAcceptTpl: '',
          // 司机接单提醒用户及管理员状态
          remindAcceptTplStatus: false,
          // 订单完成模板id
          finishTpl: '',
          // 司机接单提醒用户及管理员状态
          finishTplStatus: false
        }
      }
    },
    mounted(){
      // this.loadData();
    },
    methods: {
      // 加载数据
      loadData(){
        (async () => {
          const result = await this.$service.applicationGetSMSConfig();
          if (result.code === 0) {
            const temp = result.data;
            temp.payTplStatus = !!temp.payTplStatus;
            temp.allocateTplStatus = !!temp.allocateTplStatus;
            temp.refundTplStatus = !!temp.refundTplStatus;
            temp.cancelTplStatus = !!temp.cancelTplStatus;
            temp.acceptTplStatus = !!temp.acceptTplStatus;
            temp.remindTplStatus = !!temp.remindTplStatus;
            temp.remindAcceptTplStatus = !!temp.remindAcceptTplStatus;
            temp.finishTplStatus = !!temp.finishTplStatus;
            this.form = temp || {};
          }
        })();
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            (async () => {
              const params = Object.assign({}, this.form);
              console.log(params)
              params.payTplStatus = (params.payTplStatus ? 1 : 0);
              params.allocateTplStatus = (params.allocateTplStatus ? 1 : 0);
              params.refundTplStatus = (params.refundTplStatus ? 1 : 0);
              params.cancelTplStatus = (params.cancelTplStatus ? 1 : 0);
              params.acceptTplStatus = (params.acceptTplStatus ? 1 : 0);
              params.remindTplStatus = (params.remindTplStatus ? 1 : 0);
              params.remindAcceptTplStatus = (params.remindAcceptTplStatus ? 1 : 0);
              params.finishTplStatus = (params.finishTplStatus ? 1 : 0);
              const result = await this.$service.applicationSaveSMSConfig(params);
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.loadData();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
